const resolve = require('./resolve')
const setting = require('./setting')
const useLoader = require('./loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// console.log(process.env.WEBPACK_DEV_SERVER) // process.env.NODE_ENV
console.log(process.env.NODE_ENV) // process.env.NODE_ENV
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
  mode: isDev ? 'development' : 'production',
  entry: {
    app: resolve('src/main.js')
    // app: ["@babel/polyfill", resolve('src/main.js')]
  },
  output: {
    path: resolve('dist/'),
    filename: isDev ? 'js/[name].js' : 'js/[name].[hash:8].js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    // new CopyWebpackPlugin({
    //   patterns: [
    //     {
    //       from: resolve('public/favicon.ico'),
    //       to: resolve('dist/')
    //     }
    //   ]
    // }),
    new CopyWebpackPlugin({
      patterns: [
        {
          context: resolve('public/'), // 一定要添加上下文对象，否则直接复制public目录至dist
          from: '**/*',
          to: resolve('dist/'),
          globOptions: {
            ignore: ['index.html']
          }
        }
      ]
    }),
    new HtmlWebpackPlugin({
      template: resolve('public/index.html'),
      filename: 'index.html',
      title: setting.title,
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeAttributeQuotes: true
      }
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? 'css/[name].css' : 'css/[name].[hash:8].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader', // https://babeljs.io/
          options: {
            // presets: ['@babel/preset-env'],
            presets: [
              [
                '@babel/preset-env',
                { // 推荐使用 此垫片 形式
                  useBuiltIns: 'usage',
                  corejs: 3,
                  targets: {
                    chrome: "58",
                    ie: "11"
                  }
                }
              ]
            ],
            plugins: [
              '@babel/plugin-transform-runtime',
              // '@babel/plugin-proposal-decorators'
              [
                '@babel/plugin-proposal-decorators',
                { "legacy": true }
              ],
              '@babel/plugin-proposal-class-properties'
            ]
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(css|styl)$/,
        // loader: 'style-loader!css-loader'
        // use: ['style-loader', 'css-loader']
        // use: [
        //   { loader: MiniCssExtractPlugin.loader },
        //   { loader: 'css-loader' },
        //   { loader: 'stylus-loader' }
        // ]
        use: useLoader('stylus-loader')
      },
      {
        test: /\.scss$/,
        // use: [
        //   { loader: MiniCssExtractPlugin.loader },
        //   { loader: 'css-loader' },
        //   { loader: 'sass-loader' }
        // ]
        use: useLoader('sass-loader')
      },
      {
        test: /\.(png|jpg|jpeg|gif|webp|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024 * 3, // 单位为B，如果设置的值大于图片的大小，转换为base64，如果小于图片的值，直接生成一张图片
              // name: 'img/[name].[ext]' // 查看file-loader的api -- name -- 原来的名字
              // name: 'img/[contenthash].[ext]' // 查看file-loader的api ---- contenthash - webpack起的唯一的名字
              outputPath: 'img',
              // outputPath: resolve('dist/img'),// 不要写绝对路径
              name: '[contenthash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {}
}
